<template>
  <n-calendar :default-value="defaultDate" v-model:value="currentDate">
    <template #header>
      <n-date-picker v-model:value="defaultDate" type="date" @change="changeCalendarDate" />
    </template>
    <template #default="{ year, month, date }">
      {{ GregorianDate2ChineseDate(year, month, date) }}
    </template>
  </n-calendar>
</template>

<script lang="ts" setup>
import { CalendarChinese } from "date-chinese";

const changeCalendarDate = () => {
  currentDate.value = defaultDate.value;
};

// 默认被选中的日期的时间戳
const defaultDate = ref(Date.now());
// 被选中的日期的时间戳
const currentDate = ref(Date.now());

// 农历字符
const chineseDateStr = {
  1: "一",
  2: "二",
  3: "三",
  4: "四",
  5: "五",
  6: "六",
  7: "七",
  8: "八",
  9: "九",
  10: "十",
  11: "十一",
  12: "十二",
  13: "十三",
  14: "十四",
  15: "十五",
  16: "十六",
  17: "十七",
  18: "十八",
  19: "十九",
  20: "廿十",
  21: "廿十一",
  22: "廿二",
  23: "廿三",
  24: "廿四",
  25: "廿五",
  26: "廿六",
  27: "廿七",
  28: "廿八",
  29: "廿九",
  30: "三十",
};

// 公历转农历
const GregorianDate2ChineseDate = (year: number, month: number, date: number) => {
  const calendarChinese = new CalendarChinese();
  calendarChinese.fromGregorian(year, month, date);
  const [, , _month, leap, _date] = calendarChinese.get();
  if (leap) {
    if (_date <= 10) {
      return "闰" + chineseDateStr[_month] + "月初" + chineseDateStr[_date];
    } else {
      return "闰" + chineseDateStr[_month] + "月" + chineseDateStr[_date];
    }
  } else {
    if (_date <= 10) {
      return chineseDateStr[_month] + "月初" + chineseDateStr[_date];
    } else {
      return chineseDateStr[_month] + "月" + chineseDateStr[_date];
    }
  }
};
</script>

<style lang="scss" scoped>
.n-calendar {
  height: calc(100vh - 84px);
}
</style>
